<template>
  <div class="appointment">
    <header>
      <el-button size="mini" type="primary" @click="addShow = true">新增预约车场</el-button>
    </header>

    <section>
      <el-table :data="tableData" border height="100%">
        <el-table-column label="车场名称" prop="parkName" align="center"></el-table-column>
        <el-table-column label="预约方式" prop="reserveType" align="center">
          <template slot-scope="scope">
            {{ scope.row.reserveType | typeFilter }}
          </template>
        </el-table-column>
        <el-table-column label="预约车位数" prop="reserveParkSpace" align="center"></el-table-column>
        <el-table-column label="预约开启状态" prop="reserveRuleStatus" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.reserveRuleStatus"
              active-color="#46a6ff"
              inactive-color="#ccc"
              @change="switchStatus(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="updateShow = true,id = scope.row.id">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>

    <footer>
      <el-pagination
        :hide-on-single-page="false"
        :current-page="searchData.currentPage"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="searchData.size"
        background
        style="margin-top:10px;"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        align="center"
        @size-change="handleSizeChange"
        @current-change="getTableData"
      />
    </footer>

    <el-dialog title="新增预约车场" :visible.sync="addShow" width="550px" :close-on-click-modal="false" :close-on-press-escape="false">
      <Add v-if="addShow" @closeDialog="addShow = false" @refresh="getTableData"/>
    </el-dialog>

    <el-dialog title="修改预约车场" :visible.sync="updateShow" width="550px" :close-on-click-modal="false" :close-on-press-escape="false">
      <Update v-if="updateShow" :id="id" @closeDialog="updateShow = false" @refresh="getTableData"/>
    </el-dialog>


  </div>
</template>

<script>
  import Add from './components/add.vue'
  import Update from './components/update.vue'

  export default {
    components: { Add, Update, },
    filters: {
      typeFilter(type) {
        return type == 1 ? '开放式预约' : '闭环式预约'
      }
    },
    data() {
      return {
        addShow: false,
        updateShow: false,
        configShow: false,
        searchData: {
          currentPage: 1,
          size: 10
        },
        tableData: [],
        total: 0
      }
    },

    mounted() {
      this.getTableData();
    },

    methods: {
      getTableData(page) {
        // if(page) {
        //   this.searchData.currentPage = page;
        // }
        // if(this.searchData.isShow == 'null') {
        //   this.searchData.isShow = ''
        // }
        this.$axios({
          method: 'get',
          url: '/park/park-info/getReserveParkPage',
          params: this.searchData
        }).then((res) => {
          if(res.code == 200) {
            res.data.records.forEach(item => {
              item.reserveRuleStatus = item.reserveRuleStatus == 1? true : false;
            })
            this.tableData = res.data.records;
            this.total = res.data.total;
          }
        })
      },

      switchStatus(e) {
       
      },




      // 分页修改每页显示条数
      handleSizeChange(val) {
        this.searchData.pageSize = val;
        this.getTableData();
      },
      // 分页跳转页面
      handleCurrentChange(val) {
        this.searchData.currentPage = val;
        this.getTableData();
      }
    }
  }
</script>

<style scoped>
  .appointment {
    padding: 0 10px;
    height: calc(100vh - 84px);
  }

  header {
    height: 50px;
    line-height: 50px;
    margin-right: 20px;
  }

  section {
    height: calc(100% - 100px);
  }

  footer {
    height: 50px;
  }




</style>
